<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立方体</title>
    <style>
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0px;
        }
        section
        {
            height: 100%;
            background-color: black;
            position:relative;
            /*设置3d效果，必须在父标签设置 perspective 属性值*/
            /*perspective 设置观察者与 z=0 所在平面 间的距离*/
            perspective: 2000px;
            /*调整视点*/
            /*观察者的角度，是以 X轴 和 Y轴为基准。默认是 50% 50%*/
            perspective-origin: -50% 150%;
        }
        div
        {
            width: 300px;
            height: 300px;
            opacity: 0.5;
            position: absolute;
            /*calc:计算，“-”号两边一定要留空格*/
            left:calc(50% - 300px / 2);
            top: calc(50% - 300px / 2);
        }
        .top
        {
            /*
                2D 图形转换中，图形转换的参考点是 transform-origin: 50% 50%;
                3D 图形转换中，图形转换的参考点是 transform-origin 50% 50% 0%;
            */
            background-color: red;
            /*1. Y轴向上平移50%，X轴旋转90deg*/
            transform: translateY(-150px) rotateX(90deg);
        }
        .bottom
        {
            background-color: yellow;
             /*2. Y轴向下平移50%，X轴旋转90deg*/
            transform: translateY(150px) rotateX(90deg);
        }
        .left
        {
            background-color: green;
             /*3. X轴向左平移50%，Y轴旋转90deg*/
            transform: translateX(-150px) rotateY(90deg);
        }
        .right
        {
            background-color: blue;
             /*4. X轴向上平移50%，X轴旋转90deg*/
            transform: translateX(150px) rotateY(90deg);
        }
        .front
        {
            background-color: orangered;
             /*5. Z轴向前平移50%*/
            transform: translateZ(150px);
        }
        .back
        {
            background-color: indigo;
             /*6. Z轴向后平移50%*/
            transform: translateZ(-150px);
        }
    </style>
</head>
<body>
    <section>
        <div class="top">上</div>
        <div class="bottom">下</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="front">前</div>
        <div class="back">后</div>
    </section>
</body>
</html>